<template>
    <div style="width: calc((100% - 200px)); float: left">
        <Button @click="createArticle">新建</Button>
        <Button @click="updateArticle">修改</Button>
        <Button @click="deleteArticle">删除</Button>
        <Button @click="releaseArticle">发布</Button>
        <Button @click="unReleaseArticle">取消发布</Button>
        <Divider/>
        <Table
                highlight-row
                :columns="columns"
                :data="data"
                @on-row-click="onRowSelect"
                @on-row-dblclick="onRowDblclick"
        >
        </Table>
    </div>
</template>

<script>
    const {ipcRenderer} = require('electron')

    import ArticleCreate from "./ArticleCreate"

    export default {
        name: "ArticleList",
        components: {ArticleCreate},
        props: ["catalogId"],
        data() {
            return {
                columns: [
                    {
                        title: '文章标题',
                        key: 'title'
                    },
                    {
                        title: '作者',
                        key: 'author',
                        width: 80
                    },
                    {
                        title: '状态',
                        key: 'state',
                        width: 60
                    },
                    {
                        title: '点击数',
                        key: 'click',
                        width: 80
                    },
                    {
                        title: '转发数',
                        key: 'forward',
                        width: 80
                    },
                    {
                        title: '评论数',
                        key: 'comment',
                        width: 80
                    },
                    {
                        title: '创建时间',
                        key: 'createTime',
                        width: 110
                    },
                    {
                        title: '发布时间',
                        key: 'releaseTime',
                        width: 110
                    }
                ],
                data: [],
                catalogData: [],
                model11: '',
                model12: [],
                showCreateArticle: false,
                articleId: "0",
                articleCatalogName: ""
            }
        },
        watch: {
            // 如果 `catalogId` 发生改变，这个函数就会运行
            catalogId: function (newQuestion, oldQuestion) {
                this.listArticleByCid(newQuestion)
            }
        },
        methods: {
            listArticleByCid(cId) {
                this.$http({
                    method: 'get',
                    url: this.apiBase + '/blog/article/list/catalog/' + cId,
                    data: {}
                })
                    .then(response => {
                        this.data = response.data.data.articles;
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            selectCatelog(name) {
                this.catalogId = name;
                this.listArticleByCid(name);
            },
            createArticle() {
                let s = "/" + this.catalogId + "/0"
                ipcRenderer.send('to-createArticleWindow', s)
            },
            updateArticle() {
                let s = "/" + this.catalogId + "/" + this.articleId
                ipcRenderer.send('to-createArticleWindow', s)
            },
            deleteArticle() {
                this.$http({
                    method: 'get',
                    url: this.apiBase + '/blog/article/delete/' + this.articleId,
                    data: {}
                })
                    .then(response => {
                        if (response.data.code == 200) {
                            this.$Message.info("删除栏目成功");
                            this.listArticleByCid(this.catalogId);
                        } else {
                            this.$Message.error("删除栏目失败");
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            releaseArticle() {
                this.$http({
                    method: 'get',
                    url: this.apiBase + '/blog/article/release/' + this.articleId,
                    data: {}
                })
                    .then(response => {
                        if (response.data.code == 200) {
                            this.$Message.info("文章发布成功");
                            this.listArticleByCid(this.catalogId);
                        } else {
                            this.$Message.error("文章发布失败");
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            unReleaseArticle() {
                this.$http({
                    method: 'get',
                    url: this.apiBase + '/blog/article/unRelease/' + this.articleId,
                    data: {}
                })
                    .then(response => {
                        if (response.data.code == 200) {
                            this.$Message.info("文章取消发布成功");
                            this.listArticleByCid(this.catalogId);
                        } else {
                            this.$Message.error("文章取消发布失败");
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            onRowSelect(selection, row) {
                this.articleId = selection.bId;
            },
            onRowDblclick(selection, row) {
                this.articleId = selection.bId;
                this.updateArticle();
            }
        },
        created() {

        }
    }
</script>

<style scoped>

</style>